<html>

<!--
  Copyright (c) 2012 The Chromium Authors. All rights reserved.
  Use of this source code is governed by a BSD-style license that can be
  found in the LICENSE file.
-->

<!--
  A brief note on terminology as used here: a "graph" is a plotted screenful
  of data, showing the results of one type of test: for example, the
  page-load-time graph.  A "trace" is a single line on a graph, showing one
  one for the test: for example, the reference build trace on the
  page-load-time graph.

  This page plots arbitrary numerical data loaded from files in a specific
  format.  It uses two or more data files, all JSON-encoded:

    graphs.dat: a list of objects, each with these properties: name (the name
        of a graph) and units (the units for the data to be read by humans).
        Schematically:
          [{'name': graph_name, 'important': important,
            'units': units},
           ...,]

    <graphname>-summary.dat: for each of the graphs listed in graphs.dat, the
        corresponding summary file holds rows of data. Each row of data is an
        object with several properties:
          "rev": the revision number for this row of data
          "traces": an object with several properties of its own. The name of
              the property corresponds to a trace name, used only as an
              internal identifier, and the property's value is an array of
              its measurement and that measurement's standard deviation (or
              other measurement error).
        Schematically:
          {"traces": {<trace_name1>: [<value1>, <stddev1>],
                      <trace_name2>: [<value2>, <stddev2>], ...},
           "rev": <rev>,
           "ver": <ver>,
           "chan": <chan>,
          }
-->
<head>

<style type="text/css">
body {
  font-family: sans-serif;
}
div.plot {
  cursor: pointer;
}
div.switcher * {
  border: 1px solid black;
  border-radius: 4px 4px 0 0;
  padding-left: 0.5em;
  padding-right: 0.5em;
}
div.switcher .select {
  background: #ddd;
  cursor: pointer;
}
canvas.plot {
  border: 1px solid black;
  cursor: pointer;
}
div.plot-coordinates {
  font-family: monospace;
}
iframe.detail {
  display: none;
  width: 100%;
  height: 100%;
  border: none;
}
div.selector {
  border: solid 1px black;
  cursor: pointer;
  padding-left: 0.3em;
  background-color: white;
}
div.selector:hover {
  background-color: rgb(200,200,250);
}
div.selected {
  border-left: none;
}
div.selectors {
  width: 80px;
  display: none;
}
#explain {
  font-size: 0.75em;
  font-style: italic;
  color: rgb(100,100,100);
}
</style>

<script src="js/common.js"></script>
<script src="js/plotter.js"></script>
<script src="js/coordinates.js"></script>
<script src="config.js"></script>
<script src="js/graph.js"></script>

<script>
document.title = Config.title + ' - ' + Config.buildslave;
var params = ParseParams();
var CHANNELS = ['canary', 'dev', 'beta', 'stable'];

function init() {
  Fetch('graphs.dat', onGraphListReceived);
}

function onGraphListReceived(data, error) {
  if (error) {
    reportError(error);
    return;
  }

  var graphList = JsonToJs(data);

  // Add a graph for defined params.
  if (params['channel'] != undefined && params['graph'] != undefined) {
    var channels = params['channel'].split(',');
    for (var i = 0; i < graphList.length; i++) {
      if (graphList[i].name == params['graph']) {
        graphList[i].loc = graphList[i].name + '-summary.dat';
        var options = {
          width: window.innerWidth - 56,
          showDetail: false,
          channels: channels,
          history: params['history'],
          enableMouseScroll: true,
        };
        var graph = new Graph('output', [graphList[i]], options);
        graph.setTitle('<h3>' + params['channel'] + '</h3>');
        graph.graph();
        return;
      }
    }
  } else {
    // Set summary path.
    for (var j = 0; j < graphList.length; j++) {
      graphList[j].loc = graphList[j].name + '-summary.dat';
    }

    // Add channel comparison graph.
    var options = {
        width: window.innerWidth - 56,
        showDetail: false,
        channels: CHANNELS,
        enableMouseScroll: true,
        showTabs: true,
    };
    var graph = new Graph('output', graphList, options);
    graph.setTitle('<h3>Channel Comparison</h3>');
    graph.graph();

    // Add graph for each channel.
    for (var i = 0; i < CHANNELS.length; i++) {
      var channel = CHANNELS[i];
      var options = {
        width: window.innerWidth - 56,
        showDetail: false,
        channels: [channel],
        enableMouseScroll: true,
        showTabs: true,
      };
      var graph = new Graph('output', graphList, options)
      graph.setTitle('<h3>' + channel + '</h3>');
      graph.graph();
    }
  }
}

function reportError(error) {
  document.getElementById('output').innerHTML = "<p>" + error + "</p>";
}

window.addEventListener('load', init, false);

</script>
</head>

<body>
<div id="header_text">
Builds generated by the <a href="#">Chrome Buildbot</a>
are run through <b>
<script>
document.write(Config.title);
</script>
</b>and the results of that test are charted here.
</div>
<div id="explain">
The vertical axis is measured values, and the horizontal
axis is the version number for the build being tested.
Shift-click to place baseline. Shift-scroll to zoom slowly.
</div>
<p></p>
<div id="output"></div>
<pre id="log"></pre>
</body>
</html>
